.site-type__wrapper {
	margin: auto;
	width: 380px;
	padding: 0;
	border-radius: 3px;
	@include elevation ( 2dp );

	// At small screen sizes make the step
	// full width. -shaun
	@include breakpoint-deprecated( '<660px' ) {
		width: 100%;
	}
}

.site-type__option {
	padding: 16px 16px 16px 24px;
	margin: 0;
	font-weight: 400;
	position: relative;
	text-align: left;
	@include elevation ( 0 );
	border-bottom: 1px solid var( --color-neutral-5 );

	@include breakpoint-deprecated( '>660px' ) {
		padding-right: 24px;
	}

	&:first-child {
		border-radius: 3px 3px 0 0;
	}

	&:last-child {
		border-radius: 0 0 3px 3px;
		border-bottom: none;
	}

	.site-type__option-label,
	.site-type__option-description {
		display: block;
		line-height: 1.4em;
	}

	.site-type__option-label {
		font-size: 18px;
		color: var( --color-text );
	}

	.site-type__option-description {
		font-size: $font-body-small;
		color: var( --color-text-subtle );
	}

	.site-type__option-badge {
		font-size: $font-body-extra-small;
		margin-top: 6px;
		// Offset .badge padding-left to vertically align badge text with site type description.
		margin-left: -( $badge-padding-x );
	}

	.card__link-indicator {
		@include breakpoint-deprecated( '>660px' ) {
			opacity: 0.5;
			transform: translateX( -4px );
			transition: all 200ms cubic-bezier( 0.08, 0.74, 0.44, 1.07 );
		}
	}

	&:hover {
		cursor: pointer;
		background: var( --color-neutral-0 );

		.site-type__option-description {
			color: var( --color-text );
		}
	}

	&:focus {
		box-shadow: inset 0 0 0 3px var( --color-accent-light );
	}

	&:hover .card__link-indicator,
	&:focus .card__link-indicator {
		opacity: 1;
		transform: translateX( 0 );
	}
}

.site-type__import-button {
	text-align: center;
	margin-top: 20px;

	.button.is-borderless {
		padding: 0;
		color: var( --color-text-inverted );
		font-size: $font-body-small;
		font-weight: 600;
		text-decoration: underline;
	}
}
